<template>
      <div style="width: 1400px; margin-left: 10px">
        <h2 style="text-align: left; margin-left: 15px; font-size: 20px;">{{ title }}</h2>
        <el-row :gutter="24">
          <el-col :span="12" 
          v-for="(item, index) in personalizeDj.slice(0,2)" :key="item.categoryId">
          <div class="bokeImage_box">
            <el-image style="width: 100px; height: 100px" :src= item.picUrl cover />
            <div>
              <h1>作者: {{item.name}}</h1>
              <span>来源: {{item.category}}</span>
              <a href="#">{{item.dj.nickname}}</a> <span> {{item.secondCategoryId}}次播放</span> <span>发布时间: {{formatDate(item.createTime)}}</span> 
            </div>
          </div>
          </el-col>
        
        </el-row>

        <el-row :gutter="24">
        <el-col :span="12" 
            v-for="(item, index) in personalizeDj.slice(2,4)" :key="item.categoryId">
            <div class="bokeImage_box">
              <el-image style="width: 100px; height: 100px" :src= item.picUrl cover />
              <div>
                <h1>作者: {{item.name}}</h1>
                <span>来源: {{item.category}}</span>
                <a href="#">{{item.dj.nickname}}</a> <span> {{item.secondCategoryId}}次播放 </span> <span>发布时间: {{formatDate(item.createTime)}}</span> 
              </div>
            </div>
            </el-col>
          </el-row>

        <el-row :gutter="24">
          <el-col :span="12" 
          v-for="(item, index) in personalizeDj.slice(4,6)" :key="item.categoryId">
          <div class="bokeImage_box">
            <el-image style="width: 100px; height: 100px" :src= item.picUrl cover />
           <div>
              <h1>作者: {{item.name}}</h1>
              <span>来源: {{item.category}}</span>
              <a href="#">{{item.dj.nickname}}</a> <span> {{item.secondCategoryId}}次播放 </span> <span>发布时间: {{formatDate(item.createTime)}}</span> 
            </div>
          </div>
          </el-col>
        </el-row>
      </div>
</template>

<script lang="ts">
import { formatDate } from '@vueuse/core';
import { keys } from 'lodash';
import { computed, defineComponent, ref } from 'vue'
import { useStore } from "vuex";

export default defineComponent({
    name: 'BoKe',
    setup() {
        const store = useStore();
        const title = ref("热门播客>");
        
        store.dispatch("contaniner/personalizeDj");

        function formatDate(value: string|number|Date) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1 as number;
                MM = MM < 10 ? ('0'+MM) as unknown as number : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) as unknown as number : d;
                
                return y + '-' + MM + '-' + d ;
            };

      return{
        title,
        formatDate,
        personalizeDj: computed(()=>store.state.contaniner.personalizeDj)
        
      }
        
    },
})
</script>


<style lang="less" scoped>
.bokeImage_box {
  display: flex;
  padding: 15px;

  .el-image{
    border-radius: 15px;
  }
  div{
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    text-align: left;

    a{
      text-decoration: none;
      color: #000000
    }

}

}


</style>